<template>
    <div>
        <a-modal class="loadingModal" v-model="loadVisible" :closable="false" :footer="null">
            <a-progress type="circle" :percent="proPercent" />
            <p>正在提交批次信息</p>
        </a-modal>
        <a-modal v-model="successVisible" :closable="false" :footer="null">
            <a-result title="批次信息新增成功" status="success">
                <template #icon>
                    <a-icon type="check-circle"></a-icon>
                </template>
                <template #extra>
                <a-button key="console" type="primary">
                    完成
                </a-button>
                </template>
            </a-result>
        </a-modal>
    </div>
</template>
<script>
export default {
    name:"submitLoading",
    data(){
        return{
            loadVisible:false,
            successVisible:false,
            proPercent:0
        }
    },
    methods:{
        showModal(){
            this.loadVisible = true;
            let that = this;
            let timer = setInterval(function(){
                that.proPercent += 1;
                if(that.proPercent > 99){
                    clearInterval(timer);
                    that.loadVisible = false;
                    that.successVisible = true;
                }
            },200);
        }
    }
}
</script>
<style lang="less">
.loadingModal{
    text-align: center;
}
.loadingModal p{
        margin: 20px 0 0;
    color: #000;
    font-size: 16px;
}
.loadingModal .ant-modal-body{
    padding:64px 0;
}
</style>